<template>
  <div style="margin: 0 auto">
    <!-- 滚动条 -->
    <!-- 注意需要给 el-scrollbar 设置高度，判断是否滚动是看它的height判断的 -->

    <el-table
      align="top"
      :data="tableData"
      style="width: 906px; margin: 0 auto"
      :span-method="objectSpanMethod"
    >
      <el-table-column
        prop="aim"
        label="生源地就业"
        width="300px"
        header-align="center"
      >
      </el-table-column>

      <el-table-column label="本科生">
        <el-table-column prop="bach_num" label="人数" width="80px">
        </el-table-column>
        <el-table-column prop="bac_percent" label="比例" width="120px">
        </el-table-column>
      </el-table-column>
      <el-table-column label="硕士生">
        <el-table-column prop="mas_num" label="人数" width="80px">
        </el-table-column>
        <el-table-column prop="mas_percent" label="比例" width="120px">
        </el-table-column>
      </el-table-column>
      <el-table-column label="总计">
        <el-table-column prop="sum_num" label="人数" width="85px">
        </el-table-column>
        <el-table-column prop="sum_percent" label="比例" width="120px">
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: ["myStart", "myEnd"],
  data() {
    return {
      start: this.myStart,
      end: this.myEnd,
      tableData: [],
    };
  },
  created() {
    if (!this.start || !this.end) {
      this.axios({
        url: "grad/yearList",
        methods: "get",
      }).then((res) => {
        let years = res.data.data;

        years = years.sort(function (a, b) {
          return a - b;
        });

        //默认为最近一年
        this.start = years[years.length - 1];
        this.end = years[years.length - 1];
        this.get_industry(this.start, this.end);
      });
    } else {
      this.get_industry(this.start, this.end);
    }
  },
  watch: {
    myStart(val) {
      this.start = val;
    },
    myEnd(val) {
      this.end = val;
    },
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 0) {
          return {
            rowspan: 1,
            colspan: 1,
          };
        } else if (rowIndex === 1) {
          return {
            rowspan: 1,
            colspan: 1,
          };
        } else if (rowIndex === 4) {
          return {
            rowspan: 1,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 1,
            colspan: 1,
          };
        }
      }
    },
    count_kind(data) {
      var it_count = 0; //it
      var eco_count = 0; //金融
      var society_count = 0; //社会组织
      var sci_count = 0; //科学
      var make_count = 0; //制造业
      var energy_count = 0; //电力
      var edu_count = 0; //教育
      var weisheng_count = 0; //卫生
      var tran_count = 0; //交通
      var borrowed_count = 0; //租赁
      var house_count = 0; //房地产
      var cul_count = 0; //文化
      var army_count = 0; //军队
      var nl = 0;
      var sum = 0;

      for (var i in data) {
        var cur = data[i]["term"];
        var num = data[i]["num"];
        if (cur == "信息传输、软件和信息技术服务业") {
          it_count += num;
        } else if (cur == "金融业") {
          eco_count += num;
        } else if (cur == "公共管理、社会保障和社会组织") {
          society_count += num;
        } else if (cur == "科学研究和技术服务业") {
          sci_count += num;
        } else if (cur == "制造业") {
          make_count += num;
        } else if (cur == "电力、热力、燃气及水生产和供应业") {
          energy_count += num;
        } else if (cur == "教育") {
          edu_count += num;
        } else if (cur == "卫生和社会工作") {
          weisheng_count += num;
        } else if (cur == "交通运输、仓储和邮政业") {
          tran_count += num;
        } else if (cur == "租赁和商务服务业") {
          borrowed_count += num;
        } else if (cur == "房地产业") {
          house_count += num;
        } else if (cur == "文化、体育和娱乐业") {
          cul_count += num;
        } else if (cur == "军队") {
          army_count += num;
        } else if (cur == null) {
          nl += num;
        }
        sum += num;
      }
      return [
        it_count,
        eco_count,
        society_count,
        sci_count,
        make_count,
        energy_count,
        edu_count,
        weisheng_count,
        tran_count,
        borrowed_count,
        house_count,
        cul_count,
        army_count,
        sum,
      ];
    },
    get_industry(start, end) {
      this.axios({
        url: "/grad/backToOrigin",
        method: "get",
        params: {
          start: start,
          end: end,
        },
      })
        .then((res) => {
          console.log(res.data.data);
          var bachelor = this.count_kind(res.data.data.bachelor);
          var master = this.count_kind(res.data.data.master);
          var sum = [];
          var bac_percent = [];
          var mas_percent = [];
          var sum_percent = [];

          for (var i in bachelor) {
            sum.push(bachelor[i] + master[i]);
            bac_percent.push(
              ((bachelor[i] / bachelor[13]) * 100).toFixed(2) + " %"
            );
            mas_percent.push(
              ((master[i] / master[13]) * 100).toFixed(2) + " %"
            );
            sum_percent.push(
              (
                ((bachelor[i] + master[i]) / (bachelor[13] + master[13])) *
                100
              ).toFixed(2) + " %"
            );
          }
          console.log(bachelor);
          console.log(master);
          console.log(sum);
          console.log(bac_percent);
          console.log(mas_percent);
          console.log(sum_percent);
          var title = [
            "信息传输、软件和信息技术服务业",
            "金融业",
            "公共管理、社会保障和社会组织",
            "科学研究和技术服务业",
            "制造业",
            "电力、热力、燃气及水生产和供应业",
            "教育",
            "卫生和社会工作",
            "交通运输、仓储和邮政业",
            "租赁和商务服务业",
            "房地产业",
            "文化、体育和娱乐业",
            "军队",
            "总计",
          ];
          // 组织数据
          var table = [];
          for (var i = 0; i < 14; i++) {
            var temp = {
              aim: "1",
              item: "1",
              bach_num: "1",
              mas_num: "1",
              sum_num: "1",
              bac_percent: "1",
              mas_percent: "1",
              sum_percent: "1",
            };
            table[i] = temp;
          }

          // 1

          {
            table[0].aim = title[0];
            table[0].item = title[0];
            table[0].bach_num = bachelor[0];
            table[0].mas_num = master[0];
            table[0].sum_num = sum[0];
            table[0].bac_percent = bac_percent[0];
            table[0].mas_percent = mas_percent[0];
            table[0].sum_percent = sum_percent[0];

            //  2

            table[1].aim = title[1];
            table[1].item = title[1];
            table[1].bach_num = bachelor[1];
            table[1].mas_num = master[1];
            table[1].sum_num = sum[1];
            table[1].bac_percent = bac_percent[1];
            table[1].mas_percent = mas_percent[1];
            table[1].sum_percent = sum_percent[1];

            // 3
            table[2].aim = title[2];
            table[2].item = title[2];
            table[2].bach_num = bachelor[2];
            table[2].mas_num = master[2];
            table[2].sum_num = sum[2];
            table[2].bac_percent = bac_percent[2];
            table[2].mas_percent = mas_percent[2];
            table[2].sum_percent = sum_percent[2];

            // 4
            table[3].aim = title[3];
            table[3].item = title[3];
            table[3].bach_num = bachelor[3];
            table[3].mas_num = master[3];
            table[3].sum_num = sum[3];
            table[3].bac_percent = bac_percent[3];
            table[3].mas_percent = mas_percent[3];
            table[3].sum_percent = sum_percent[3];

            // 5
            table[4].aim = title[4];
            table[4].item = title[4];
            table[4].bach_num = bachelor[4];
            table[4].mas_num = master[4];
            table[4].sum_num = sum[4];
            table[4].bac_percent = bac_percent[4];
            table[4].mas_percent = mas_percent[4];
            table[4].sum_percent = sum_percent[4];

            // 6
            table[5].aim = title[5];
            table[5].item = title[5];
            table[5].bach_num = bachelor[5];
            table[5].mas_num = master[5];
            table[5].sum_num = sum[5];
            table[5].bac_percent = bac_percent[5];
            table[5].mas_percent = mas_percent[5];
            table[5].sum_percent = sum_percent[5];

            // 7
            table[6].aim = title[6];
            table[6].item = title[6];
            table[6].bach_num = bachelor[6];
            table[6].mas_num = master[6];
            table[6].sum_num = sum[6];
            table[6].bac_percent = bac_percent[6];
            table[6].mas_percent = mas_percent[6];
            table[6].sum_percent = sum_percent[6];

            // 8
            table[7].aim = title[7];
            table[7].item = title[7];
            table[7].bach_num = bachelor[7];
            table[7].mas_num = master[7];
            table[7].sum_num = sum[7];
            table[7].bac_percent = bac_percent[7];
            table[7].mas_percent = mas_percent[7];
            table[7].sum_percent = sum_percent[7];

            // 9
            table[8].aim = title[8];
            table[8].item = title[8];
            table[8].bach_num = bachelor[8];
            table[8].mas_num = master[8];
            table[8].sum_num = sum[8];
            table[8].bac_percent = bac_percent[8];
            table[8].mas_percent = mas_percent[8];
            table[8].sum_percent = sum_percent[8];

            // 10
            table[9].aim = title[9];
            table[9].item = title[9];
            table[9].bach_num = bachelor[9];
            table[9].mas_num = master[9];
            table[9].sum_num = sum[9];
            table[9].bac_percent = bac_percent[9];
            table[9].mas_percent = mas_percent[9];
            table[9].sum_percent = sum_percent[9];

            // 11
            table[10].aim = title[10];
            table[10].item = title[10];
            table[10].bach_num = bachelor[10];
            table[10].mas_num = master[10];
            table[10].sum_num = sum[10];
            table[10].bac_percent = bac_percent[10];
            table[10].mas_percent = mas_percent[10];
            table[10].sum_percent = sum_percent[10];
            // 12
            table[11].aim = title[11];
            table[11].item = title[11];
            table[11].bach_num = bachelor[11];
            table[11].mas_num = master[11];
            table[11].sum_num = sum[11];
            table[11].bac_percent = bac_percent[11];
            table[11].mas_percent = mas_percent[11];
            table[11].sum_percent = sum_percent[11];
            // 13
            table[12].aim = title[12];
            table[12].item = title[12];
            table[12].bach_num = bachelor[12];
            table[12].mas_num = master[12];
            table[12].sum_num = sum[12];
            table[12].bac_percent = bac_percent[12];
            table[12].mas_percent = mas_percent[12];
            table[12].sum_percent = sum_percent[12];

            // 14
            table[13].aim = title[13];
            table[13].item = title[13];
            table[13].bach_num = bachelor[13];
            table[13].mas_num = master[13];
            table[13].sum_num = sum[13];
            table[13].bac_percent = bac_percent[13];
            table[13].mas_percent = mas_percent[13];
            table[13].sum_percent = sum_percent[13];
          }

          this.tableData = table;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scope>
.panel-group {
  margin-top: 5%;
  height: 20%;
  width: 100%;
  margin-bottom: 20%;
}
.panel-group .table-panel-col {
  margin-bottom: 64px;
}
.panel-group .table-panel {
  cursor: pointer;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  color: #666;
  background: #fff;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.05);
  width: 200px;
}
.panel-group .table-panel .table-panel-description {
  float: right;
  font-weight: bold;
  margin: 26px;
  margin-left: 0px;
}

.panel-group .table-panel .table-panel-text {
  line-height: 18px;
  color: rgba(0, 0, 0, 1);
  font-size: 20px;
  margin-bottom: 10px;
}
</style>
